<template>
  <el-select v-model="value" placeholder="请选择"
             @visible-change="initOpt"
             @change="tell"
             class="self-select">
    <input type="text" class="el-input__inner inset-input"
           @input="searchOption" placeholder="搜索..."
           v-model="searchVal">
    <el-option
      key="-99"
      label="全部"
      value="all">
    </el-option>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
<style>
  .el-scrollbar{
    display: block!important;

  }
  .inset-input{
    margin: 10px 5%;
    max-width: 90%;
  }
  .self-select{
    /*width: 100%;*/
  }
</style>
<script type="es6">
  /*
   * 接收：选项Array
   *
   * */
  export default {
    props: {fatherOptions: Array},
    data() {
      return {
        options: [],
        value: '',
        searchVal:""
      }
    },
    watch:{
     /* options:function(newv,oldv){
        console.log(this.value)
          this.value = ''
      }*/
    },
    methods:{
      searchOption(){
        if(!this.searchVal) return  this.options=this.fatherOptions;
          let temp=[];
        this.fatherOptions.map(item => {
          if(item.label.indexOf(this.searchVal) !== -1){
            temp.push(item)
          }
        })
        this.options= temp;
      },
      initOpt(val){
        this.searchVal="";
        this.options=val?this.fatherOptions:this.options;
      },
      tell(){
        console.log(this.value)
        this.$emit('selectVal',this.value)
      },

    },
    mounted(){
      this.options = this.fatherOptions;
    }
  }
</script>
